<template>
  <div :class="theme">
    <p>Window Width: {{ width }}px</p>
    <p>Device Type: {{ deviceType }}</p>
    <button @click="toggleTheme">Toggle Theme</button>
  </div>
</template>

<script>
import {windowSizeMixin} from "./vue2.mixin.windowSizeMixin";
import {themeMixin} from "./vue2.mixin.themeMixin";

export default {
  mixins: [windowSizeMixin, themeMixin], // 使用 Mixin
  computed: {
    deviceType() {
      return this.width < 768 ? 'mobile' : 'desktop';
    },
  },
};
</script>

<style>
.light {
  background-color: white;
  color: black;
}

.dark {
  background-color: black;
  color: white;
}
</style>